<template>
    <el-form ref="ruleFormRef" label-position="top" :model="importForm" :rules="formRules" label-width="auto"
        v-loading="isLoading">
        <el-row :gutter="30">
            <re-col :value='24' :xs='24' :sm='24'>
                <el-form-item prop='file'>
                    <el-upload class="upload-demo" drag action="" :auto-upload="false" multiple :limit="1"
                        :style="{ width: '100%' }" :on-change="handleChange" v-model:file-list="uploadFiles">
                        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                        <div class="el-upload__text">
                            拖拽文件或者<em>点击文件</em>上传
                        </div>
                        <template #tip>
                            <div class="el-upload__tip">
                            </div>
                        </template>
                    </el-upload>
                </el-form-item>
            </re-col>
            <re-col :value='12' :xs='12' :sm='24'>
                <el-form-item label='所属厂家' prop='factoryId'>
                    <factoryIdSelect v-model='importForm.factoryId' clearable :placeholder='prompt?.factoryId'
                        :style='{ width: "100%" }' @blur="formValidateField(ruleFormRef, 'factoryId')" />
                </el-form-item>
            </re-col>
        </el-row>
    </el-form>
</template>
<script lang="ts" setup>
import factoryIdSelect from '@/components/select/factoryIdSelect/factoryIdSelect.vue'
import { UploadFilled } from '@element-plus/icons-vue';
import { formValidateField } from '@/utils/functions'
import ReCol from "@/components/ReCol";
import { getUnitTree } from '@/api/manage/units-manager/units-manager/index';
import { getIndivduaiSelectList } from '@/api/manage/Individual-management/Individual-users/index';
import type { FormRules } from "element-plus";
import { titles, prompt } from './index';
import { usePageVariablesStoreHook } from '@/store/modules/pageVariables'
import { getFamilySelectList, getRoomSelectList } from '@/api/manage/Individual-management/Individual-management/index.ts';
const datas = ref([]);
const propss = {
    label: 'unityName',
    value: 'id',
    children: 'childs',
}
type FormProps = {
    importForm: any,
    isLoading: false
}
const list = ref([])
const options = ref([])
const loading = ref(false)
const familyoptions = ref([])
const roomoptions = ref([])
const props = withDefaults(defineProps<FormProps>(), {
    importForm: {
        file: null,
        operator: null,
        canal: null,
    },
    isLoading: false
});

const ruleFormRef = ref();
const formRules = reactive(<FormRules>{
    file: [{ required: true, message: "请上传文件", trigger: 'blur' },],
    factoryId: [{ required: true, message: "请选择所属厂家", trigger: 'blur' },],
});
const uploadFiles = ref<any>([])
const handleChange = (uploadFile, uploadFiles) => {
    props.importForm.file = uploadFile.raw
}

getUnitTree({ unityId: usePageVariablesStoreHook().getManage()?.unityId }).then(res => {
    datas.value.push(...res.result.data)
})
const treeChange = (e) => {
    // console.log("foofh", e);
    props.importForm.userId = ''
    props.importForm.familyId = ''
    props.importForm.roomId = ''
    getIndivduaiSelectList({
        unityId: e
    }).then(res => {
        list.value = res.result.users
        options.value = list.value
    })
}
const remoteMethod = (query) => {
    if (query) {
        loading.value = true
        setTimeout(() => {
            loading.value = false
            options.value = list.value.filter((item) => {
                return item.familyName.includes(query)
            })
        }, 100)
    } else {
        options.value = list.value
    }
}

//监听个体用户获取家庭下拉框
watch(() => props.importForm.userId, (val) => {
    if (props.importForm.userId !== null && props.importForm.userId !== '' && props.importForm.userId !== undefined) {
        getFamilySelectList({ userId: props.importForm.userId }).then(res => {
            // list.value = res.result.data
            familyoptions.value = res.result.data
            props.importForm.familyId = ''
            props.importForm.roomId = ''



        })
    }

}, {
    deep: true,
    immediate: true
})
//监听家庭获取房间号
watch(() => props.importForm.familyId, (val) => {
    if (props.importForm.familyId !== null && props.importForm.familyId !== '' && props.importForm.familyId !== undefined) {
        getRoomSelectList({ familyId: props.importForm.familyId }).then(res => {
            roomoptions.value = res.result.data
            props.importForm.roomId = ''
        })
    }

}, {
    deep: true,
    immediate: true
})
//家庭下拉框change
const familychange = (e) => {

}
function getRef() {
    return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
<style lang="scss" scoped></style>
